<template>
    <div>
        <el-dialog
            title="发票"
            width="80%"
            :visible.sync="showDialog"
            @close="closeBox"
            :modal-append-to-body='false'
        >
            <div class="flex-app-continer1" style="overflow: auto;height: 90vh;">
                <div class="info">
                    <div class="infoTitle"  style='margin-bottom:10px;'>
                       <div></div>

                       <div style="border-bottom: thick double #bb8c91;">
                          <span style='font-size: 32px !important;color: #bb8c91'>电子发票</span><span style='font-size: 32px !important;color: #bb8c91;'>（{{'数电专票'}}）</span>
                       </div>
                       <div style="display: flex;flex-direction: column;height: 48px;justify-content: space-around;margin-top: 5px;color: #bb8c91;">
                           <div ><span>发票号码：</span><span>测试数据</span></div>
                           <div ><span>开票日期：</span><span>测试日期2024年4月28日</span></div>
                       </div>
                    </div>
                </div>
                <!-- 整体发票区域 -->
                <div class="invoice-area">
                    <div class="box1">
                        <span class="bar-tit">购买方信息</span>
                    </div>
                    <div class="box2">
                        <div class="flex-invoice">
                            <span >名称：</span>
                            <span>
                                {{ infoFormData.gmfmc }}
                            </span>
                            <div v-show="infoFormData.gmfsfwzrr == '01'">（个人）</div>
                        </div>
                        <div class="flex-invoice">
                            <div  style="margin-top: -21px">
                                纳税人识别号：
                            </div>
                            <div>
                                {{ infoFormData.gmfnsrsbh }}
                            </div>
                        </div>
                    </div>
                    <div class="box3">
                        <span class="bar-tit">销售方信息</span>
                    </div>
                    <div class="box4">
                        <div class="flex-invoice">
                            <span >名称：</span>
                            <span>{{ disabledEditForm.xsfmc }}</span>
                        </div>
                        <div class="flex-invoice">
                            <div  style="margin-top: -21px">
                                纳税人识别号：
                            </div>
                            <span>{{disabledEditForm.xsfnsrsbh}}</span>
                        </div>
                    </div>
                    <div class="box5">
     
                        <div class="table-area-invoice">
                            <tableList 
                                border
                                maxHeight="200"
                                :keySet="keySet"
                                :tableData="tableData"
                                :showSummary="true"
                                :summaryMethod="footerMethod"
                                >
                            </tableList>
                        </div>
                    </div>
                    <div class="box6">价税合计（大写）</div>
                    <div class="box7">
                        <el-button
                            type="text"
                            style="flex: 1; color: #222; text-align: left"
                        >
                            {{
                                infoFormData.jems == '01'
                                    ? changeMoneyToChinese(
                                          Math.abs(
                                              Number(
                                                  bigNumAdd(totalbhsN , seN).toFixed(2)
                                              )
                                          ),
                                          '元'
                                      )
                                    : changeMoneyToChinese(
                                          bigNumMultip(totalhsN,1,2) , '元'
                                      )
                            }}
                        </el-button>
                        <span class="total-tit">（小写）</span>
                        <div class="total-val">
                            ￥{{
                                infoFormData.jems == '01'
                                    ? addLargeDecimalNumbers(totalbhsN , seN)
                                    : totalhsN
                            }}
                        </div>
                    </div>
      
                    <div class="box8" :style=bzHeight><span class="bar-tit">备注</span></div>
                    <div class="box9" :style=bzHeight>
                        <vxe-textarea
                            v-model="infoFormData.bz"
                            class="text-area"
                            resize="none"
                            style="color: #bb8c91; border: none; height: 100%"
                            maxlength="450"
                        ></vxe-textarea>
                    </div>
                    <div class="man-area">
                        <span class="man-input">开票人：</span>
                        <span>{{ disabledEditForm.kpr }}</span>
                    </div>
                </div>
            </div>
  
        </el-dialog>
  

    </div>
  </template>
  <script>
  import tableList from '@/components/tableList/index.vue'
  import {
    getDefBIzdictByLxdm,
  } from '@/api/vmsClassifyCode.js'
  
  export default {
    name: 'realMakeInvoiceComp',
    data() {
        return {
            showDialog:false,
          kprzjlxOptions:[],
            tedingyaosuSelect: [],
            // base
            infoFormData: {
                jems: '01',
                cezslxdm: '',
                gmfsfwzrr: '02',
                dhlx: '',
                dh: '',
                tdys: '',
  
                gmfmc: '',
                gmfnsrsbh: '',
  
                gmfdz: '',
                gmfdh: '',
                gmfkhh: '',
                gmfzh: '',
                gmfjbr: '',
                jbrsfzjhm: '',
                gmfjbrlxdh: '',
                xsfdz: '',
                xsfdh: '',
                xsfkhh: '', //
                xsfzh: '', //
                skyhmc: '',
                skyhzh: '', //
                jsfs: '', //
                kprzjhm: '', //
                qyDm: '', //
  
                xsfmc: '', //
                bz: '', //
            },
            keySet: [
                {
                    label: '问题发票',
                    englishName: 'bhsje',
                },
                {
                    label: '问题列',
                    englishName: 'hsje', 
                },
                {
                    label: '问题描述',
                    englishName: 'se', 

                },
            ],
            tableData: [],
            disabledEditForm: {
                xsfmc: '',
                xsfdz: '',
                xsfdh: '',
                xsfnsrsbh: '',
                xsfzh: '',
                xsfkhh: '',
                qydm: '',
                hydm: '',
                kpr: '',
            },
            totalbhsN: 0, //
            totalhsN: 0, //
            totalbhs: 0, //
            totalhs: 0, //
            seN: 0, //
            }
    },
    computed:{
        bzHeight(){
            return {
                height: this.infoFormData.cezslxdm == '02' && '100px'
            }
        },

    },
    created() {
    },
    methods: {
        getDict() {
            getDefBIzdictByLxdm({
                lxdm: 'VMS_TDYSBQGL',
            }).then(
                ({ data }) => {
                  if(Array.isArray(data)){
                    this.tedingyaosuSelect = data.filter(item=>{
                    // || item.lxxdm == '09'
                      return item.lxxdm == '05' || item.lxxdm == '06'
                    });
                  }else{
                      this.tedingyaosuSelect = []
                  }
  
                },
                (err) => {}
            )
            getDefBIzdictByLxdm({
                lxdm: 'VMS_ZJLX',
            }).then(
                ({ data }) => {
                  console.log(data);
                  if(Array.isArray(data)){
  
                    this.kprzjlxOptions = data
                  }else{
                      this.kprzjlxOptions = []
                  }
  
                },
                (err) => {}
            )
        },

        resetData() {
            // 整体表单
            this.infoFormData = {
                jems: '01', //
                cezslxdm: '', //
                gmfsfwzrr: '02', //
                dhlx: '', //
                dh: '', //
                tdys: '', //
  
                gmfmc: '', //
                gmfnsrsbh: '', ///
  
  
                gmfdz: '', //
                gmfdh: '', //
                gmfkhh: '', //
                gmfzh: '', //
                gmfjbr: '', //
                jbrsfzjhm: '', //
                gmfjbrlxdh: '', //
                xsfdz: '', //
                xsfdh: '', //
                xsfkhh: '', //
                xsfzh: '', //
                skyhmc: '', //
                skyhzh: '', //
                jsfs: '', //
                kprzjhm: '', //
                qyDm: '', //
  
                xsfmc: '', //
                bz: '', //
            }
            this.tableData = []
            this.totalbhsN = 0
            this.totalhsN = 0
            this.totalbhs = 0
            this.totalhs = 0
            this.seN = 0
        },
        changeMoneyToChinese(money, currencyunit) {
            if (currencyunit == '万元' || currencyunit == '万元/亩') {
                money = (money * 10000).toFixedCustom(6)
            }
            let cnNums = new Array(
                '零',
                '壹',
                '贰',
                '叁',
                '肆',
                '伍',
                '陆',
                '柒',
                '捌',
                '玖'
            )
            let cnIntRadice = new Array('', '拾', '佰', '仟') //
            let cnIntUnits = new Array('', '万', '亿', '兆') //
            let cnDecUnits = new Array('角', '分', '毫', '厘') //
            let cnInteger = '整' //
            let cnIntLast = '元' //
            let IntegerNum //
            let DecimalNum //
            let DecimalStr = '' //
            // end
            let ChineseStr = '' //
  
            let parts //
  
            if (money == '') {
                return ''
            }
            money = parseFloat(money)
            if (money == 0) {
                ChineseStr = cnNums[0] + cnIntLast + cnInteger
                if (currencyunit == '万元/亩') {
                    ChineseStr = ChineseStr + '每亩'
                }
                return ChineseStr
            }
            money = money.toString() //
            if (money.indexOf('.') == -1) {
                IntegerNum = money
                DecimalNum = ''
            } else {
                parts = money.split('.')
                IntegerNum = parts[0]
                DecimalNum = parts[1].substr(0, 4)
            }
            if (parseInt(IntegerNum, 10) > 0) {
                let zeroCount = 0
                let IntLen = IntegerNum.length
                let n, p, q, m, i
                for (i = 0; i < IntLen; i++) {
                    n = IntegerNum.substr(i, 1)
                    p = IntLen - i - 1
                    q = p / 4
                    m = p % 4
                    if (n == '0') {
                        zeroCount++
                    } else {
                        if (zeroCount > 0) {
                            ChineseStr += cnNums[0]
                        }
                        zeroCount = 0 // 归零
                        ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
                    }
                    if (m == 0 && zeroCount < 4) {
                        ChineseStr += cnIntUnits[q]
                    }
                }
                ChineseStr += cnIntLast
            }
  
            if (DecimalNum != '') {
                let decLen = DecimalNum.length
                let n, i
                for (i = 0; i < decLen; i++) {
                    n = DecimalNum.substr(i, 1)
                    if (n != '0') {
                        DecimalStr += cnNums[Number(n)] + cnDecUnits[i]
                    }
                }
            }
  
            if (DecimalStr == '') {
                ChineseStr += cnInteger
            } else {
                ChineseStr += DecimalStr
            }
            // end
  
            if (ChineseStr == '') {
                ChineseStr += cnNums[0] + cnIntLast + cnInteger
            }
            if (currencyunit == '万元/亩') {
                ChineseStr = ChineseStr + '每亩'
            }
            return ChineseStr
        },
        emptyUtil(val){
          if(typeof val === 'undefined' ||
              val === '' ||
              val=== null ||
              val === 0 ){
              return true
          }  else{
              return false;
          }
       
        },
        delDW(val) {
            if (val.includes('%')) {
                val = val.split('%')[0] / 100
            }
            let res = (val)
            return res
        },
        addDW(val) {
            if ((val != '' && val != null && val != undefined) || val === 0) {
                try {
                    val = val * 100 + '%'
                    return val
                } catch (error) {}
            }
            return val
        },
        footerCellClassName({ $rowIndex, column, columnIndex }) {
            if (columnIndex === 0) {
                if ($rowIndex === 0) {
                    return 'col-red'
                } else {
                    return ''
                }
            }
        },
        tableCellStyle({ row, column, rowIndex, columnIndex }) {
            let rowStyle = {}
            if (
                (columnIndex == 1 ||
                    columnIndex == 2 ||
                    columnIndex == 3 ||
                    columnIndex == 4 ||
                    columnIndex == 5 ||
                    columnIndex == 6 ||
                    columnIndex == 7) 
            ) {
                rowStyle = {
                    background: '#e6f7f7',
                    border: '1px solid #dcdfe6',
                    'border-left': 'none',
                }
            } else if (
                columnIndex == 0
            ) {
                rowStyle.background = '#fff'
                rowStyle = {
                    background: '#fff',
                    'border-right': '1px solid #dcdfe6',
                }
            } else {
                rowStyle = {
                    background: '#EEEEEE',
                    border: '1px solid #dcdfe6',
                    'border-left': 'none',
                }
            }
            return rowStyle
        },
        rowClassName({ row }) {
            return 'row'
        },
        addLargeDecimalNumbers(num11, num22) {
              return    this.bigNumAdd(num11,num22).toString()
          },
        sumNum(list, field) {
            let count = '0'
            list.forEach((item) => {
                  if(item[field]){
                      count = this.addLargeDecimalNumbers(count,item[field])
                  }
            })
            let n = count
            let n1 = n + ''
            let obj = {
                number: (n),
                numberStr: n1,
            } 
            return obj
        },
        footerMethod({ columns, data }){
            let k = this;
          const footerData = [
              columns.map((column, _columnIndex) => {
                  if (_columnIndex === 0) {
                      return '合计'
                  }
                  // 字段需要修改
                  if (['je', 'se'].includes(column.property)) {
                      let tmp = this.sumNum(data, column.property)
                      let tmpNumber = String(tmp.numberStr)

                      if (column.property == 'hsje') {
                          k.totalhs = String(tmpNumber)
                          k.totalhsN = String(tmp.number)
                      }
                      if (column.property == 'bhsje') {
                          k.totalbhs = String(tmpNumber)
                          k.totalbhsN = String(tmp.number)
                      }
                      if (column.property == 'se') {
                          k.seN = String(tmp.number)
                      }

                      return tmp.numberStr
                  }
                  return null
              }),
          ]
          return footerData
      },
        closeBox() {
            this.showDialog = false;
        },
        detailCopy(d) {
            this.infoFormData = d.vmsManualBaseVo
            this.$set(this.infoFormData,'gmfsfwzrr',d.vmsManualExtendVo.gmfzrrbz)
  
            let jems = this.infoFormData.jems // 01不含税 02含税

  
            this.disabledEditForm = {
                xsfdz: d.vmsManualExtendVo.xsfdz,
                xsfzh: d.vmsManualExtendVo.xsfzh,
                xsfkhh: d.vmsManualExtendVo.xsfkhh,
                xsfdh: d.vmsManualExtendVo.xsfdh,
                qydm: d.vmsManualExtendVo.qydm,
                xsfmc: d.vmsManualBaseVo.xsfmc,
                xsfnsrsbh: d.vmsManualBaseVo.xsfnsrsbh,
                hydm: d.vmsManualBaseVo.hydm,
                kpr: d.vmsManualBaseVo.kpr,
            }
  
            setTimeout(()=>{
                  this.tableData = d.vmsManualDetailVoList.map((voi) => {
  
                      let res = {
                          ...voi,
                          bhsdj:'',
                          bhsje: '',
                          hsdj: voi.hsdj,
                          hsje: ''
                      }
                      if(jems == '01'){
                          res.bhsdj= voi.dj || ''
                          res.bhsje= voi.je
                      }else if(jems == '02'){
                          res.hsdj = voi.dj
                          res.hsje = voi.je
                      }
                      return res
                  })
            },500)
  
        },
        show(row) {
            this.resetData()
                setTimeout(() => {
                    //   this.detailCopy(row)
                    this.tableData = [
                        {
                            hsje: '1',
                            bhsje: '1',
                            se: '1',
                        }
                    ]
                      this.showDialog = true;
                }, 200)
  
        },

    },
    components:{
        tableList
    }
  
  }
  </script>
  <style lang="scss" scoped>

  
  input::-ms-clear {
    width: 0;
    height: 0;
  }
  .invoice-area {
    position: relative;
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .box1 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box2 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .box3 {
    width: 28px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box4 {
    width: 420px;
    height: 105px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .box5 {
    width: 896px;
    height: 262px;
    min-height: 190px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-top: none;
    border-bottom: none;
  }
  .box6 {
    width: 240px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    color: #bb8c91;
    text-align: center;
    line-height: 32.2px;
  }
  .box7 {
    width: 656px;
    height: 32.2px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #bb8c91;
  }
  .boxSevenPointfive{
    // height: 500px;
    width: 896px;
  }
  .box8 {
    width: 28px;
    height: 120px;
  
    // height: 73.5px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    border-right: none;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bb8c91;
  }
  .box9 {
    width: 868px;
    height: 120px;
    opacity: 1;
    box-sizing: border-box;
    border: 1px solid #bb8c91;
    color: #bb8c91;
    overflow-y: auto;
    white-space:inherit;
  
    .zulinFormClass{
        margin:12px  12px 0;
        box-sizing: border-box;
    }
  }
  .bar-tit {
    width: 20px;
    display: inline-block;
    text-align: center;
  }
  .flex-invoice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 30px;
    padding: 5px 0px;
    width: 400px;
  }
  .input {
    flex: 1;
  }


  .gray {
  }
  .row {
    box-sizing: border-box;
    height: 24.5px;
    display: inline-block;
    line-height: 24.5px;
    margin-bottom: 5px;
  }

  .table-area-invoice {
    // padding-left: 10px;
    height: 240px;
    overflow: auto;
    min-height: 160px;
    position: relative;
  }
  .col-red {
    color: #bb8c91;
  }
  .total-tit {
    color: #bb8c91;
  }
  .total-val {
    color: #bb8c91;
    display: inline-block;
    width: 40%;
    white-space: normal;
  }
  .remark {
    padding: 10px;
    display: inline-block;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .red {
    color: #ea0000;
  }
  .info {
    width: 900px;
    margin: 0 auto;
  }

  .infoTitle{
      display: flex;
      justify-content:space-between;
  }
  .radio-tit {
    font-weight: bold;
  }
  .radio-item {
    margin-right: 20px;
    cursor: pointer;
  }
  .radio-icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
  }
  .box9 textarea {
    width: 100%;
    height: 100%;
    color: #bb8c91;
    border: none;
  }
  .man-area {
    margin-top: 12px;
    // margin-left: 60px;
  }
  .man-input {
    color: #bb8c91;
  }
  .add-fj {
    margin-right: 15px;
    cursor: pointer;
    color: #68d3cd;
  }
  .del-fj {
    cursor: pointer;
    color: #68d3cd;
  }
  .fj-area {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .form-tit {
    height: 14px;
    border-left: 3px solid #07b9b9;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 14px;
    padding-left: 8px;
    font-weight: bold;
    width: 600px;
  }
  
  </style>
  